<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框</title>
    <style>
        #d1{
            /*

                border: width  style color
                    width: 以px为单位的数字
                    style:
                        solid 实线
                        dotted: 虚线(点)
                        dashed: 虚线(线)
                    color: 合法的颜色值
            */
            width:200px;
            height:200px;
            background: pink;
            /*border-top-color: black ;*/
            /*border-top-style: solid;*/
            /*border-top-width: 3px;*/
            /*border-top: 3px solid #000;*/
            /*border-bottom: 3px solid #FF1122;*/
            border: 4px dashed #000;
        }

        table,td,th{
            border:1px solid #000;

        }
        table{
            /*
                border-collapse： 设置表格的边框样式，边框是分开还是合并
                    separate : 边框分开
                    collapse ： 边框合并
            */
            border-collapse: separate;
            /*
               设置单元格与单元格之间的距离，要求border-collapse 取值必须是separate
            */
            border-spacing: 10px;
        }
    </style>
</head>
<body>
    <div id="d1"></div>

    <hr>
    <table>
        <caption>书籍列表</caption>
        <thead>
            <tr>
                <th>编号</th>
                <th>书名</th>
                <th>作者</th>
                <th>单价</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>《平凡的世界》</td>
                <td>路遥</td>
                <td>32.5</td>
                <td>
                    <a href="#">修改</a>
                    <a href="#">删除</a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>《废都》</td>
                <td>贾平凹</td>
                <td>36.5</td>
                <td>
                    <a href="#">修改</a>
                    <a href="#">删除</a>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>备注</td>
                <td colspan="4"></td>
            </tr>
        </tfoot>
    </table>
</body>
</html>